<template>
    <div>
        <!--编辑信息弹窗-->
        <div>
            <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    height="50%"
                    center>
            <span>
                <el-input
                        type="text"
                        placeholder="请输入标题"
                        v-model="title"
                        maxlength="15"
                        show-word-limit
                >
                </el-input>
                <div style="margin: 20px 0;"></div>
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="content"
                        maxlength="50"
                        show-word-limit
                >
                </el-input>

            </span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="send">确 定</el-button>
            </span>
            </el-dialog>

        </div>
        <!--最近未处理报修信息-->
       <!-- <div>最近报修信息表</div>-->
        <div @click="toBaoxiu">
            <el-table
                    :data="tableData2"
                    style=" margin: 15px;width: 45%; float: right "
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="name"
                        label="报修人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="housecode"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="msg"
                        label="报修信息">
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="报修时间">
                </el-table-column>
            </el-table>
        </div>
        <!--历史发送的信息-->
       <!-- <div>历史发送消息表</div>-->
        <div>
            <el-table
                    :data="tableData1"
                    style=" margin: 15px;width: 45%; float: left "
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="title"
                        label="标题"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="content"
                        label="信息内容">
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="发送时间">
                </el-table-column>
            </el-table>
        </div>
        <!--编辑按钮-->
        <div>
            <el-button
                    style="margin-left: 180px;margin-top: 15px;margin-bottom: 15px"
                    type="primary"
                    icon="el-icon-edit"
                    circle @click="centerDialogVisible = true">点击编辑
            </el-button>
        </div>
        <!--电器报修圆饼分布年-->
        <div id="eleappbaoxiupr" style="width: 45%; height: 400px; float: right; margin: 15px"></div>
        <!--报修月次数统计折线图-->
        <div id="baoxiucount" style="width: 45%; height: 400px; margin: 15px "></div>


    </div>


</template>

<script>
    /*报修信息*/
    import {selectstatic} from "../../../api/bishe/baoxiu";
    /*查询各个用电器保修数量*/
    import {eleappcount} from "../../../api/bishe/baoxiu";
    /*查询前三个月报修数量*/
    import {threemonthcount} from "../../../api/bishe/baoxiu";


    /*消息信息*/
    import {listAll} from "../../../api/bishe/message";
    import {list} from "../../../api/bishe/message";
    import {update} from "../../../api/bishe/message";
    import {remove} from "../../../api/bishe/message";
    import {save} from "../../../api/bishe/message";
    import {push} from "../../../api/bishe/message";
    /*exchart引用*/
    import echarts from 'echarts'


    export default {
        inject: ['reload'],
        data() {
            return {
                title: '',
                content: '',
                centerDialogVisible: false,
                housecodearray: [],
                housecodelist: [],
                tableData1: [],
                tableData2: [],
                zhexianData: [],
                eleAppCount: [],
                threeMonthCount:{},
                eleappbaoxiupr: null,
                baoxiucount: null
            };
        },
        created() {
            this.selectAll();
        },

        mounted() {
            this.draweleappbaoxiupr();
            this.drawbaoxiucount();
        },

        methods: {

            selectAll() {
                selectstatic()
                    .then(res => {
                        this.tableData2 = res.data.rows;
                    });
                listAll()
                    .then(res => {
                        this.tableData1 = res.data.items;
                    });
                eleappcount()
                    .then(res => {
                        this.eleAppCount = res.data.rows[0];
                    });
                threemonthcount()
                    .then(res => {
                        console.log("threemonthcount");
                        this.threeMonthCount = res.data.row;
                        console.log(this.threeMonthCount);
                        console.log(this.threeMonthCount.thiscount);
                    })


            },
            /*页面跳转*/
            toBaoxiu() {
                this.$router.push({path: '/index/shouye/baoxiu'})
            },
            send() {
                this.centerDialogVisible = false;

                for (const housecode of this.housecodearray) {
                    var code = housecode.join('');
                    this.housecodelist.push(code);
                }
                console.log(this.housecodelist)

                const payload = {
                    title: this.title,
                    content: this.content,
                    housecodelist: this.housecodelist
                }
                push(payload)
                    .then(res => {
                        this.reload();
                        console.log(res)
                    })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        });
                    });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            /*圆饼图*/
            draweleappbaoxiupr() {
                this.eleappbaoxiupr = echarts.init(document.getElementById('eleappbaoxiupr'));
                /*延迟一秒画图,要先获得数据在画图,不然画不出图*/
                setTimeout(()=>{
                    this.eleappbaoxiupr.setOption({
                        title: {
                            text: '电器种类报修比例',
                            subtext: '2020年',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['冰箱', '空调', '洗衣机', '油烟机', '热水器', '电视', '灯泡']
                        },
                        series: [
                            {
                                name: '报修数量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: this.eleAppCount.sumbingxiang, name: '冰箱'},
                                    {value: this.eleAppCount.sumkongtiao, name: '空调'},
                                    {value: this.eleAppCount.sumxiyiji, name: '洗衣机'},
                                    {value: this.eleAppCount.sumyouyanji, name: '油烟机'},
                                    {value: this.eleAppCount.sumreshuiqi, name: '热水器'},
                                    {value: this.eleAppCount.sumdianshi, name: '电视'},
                                    {value: this.eleAppCount.sumdengpao, name: '灯泡'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                },1000)

            },
            /*折线图*/
            drawbaoxiucount() {
                this.baoxiucount = echarts.init(document.getElementById('baoxiucount'));
               setTimeout(() => {
                   this.baoxiucount.setOption({
                       title: {
                           text: '过去三个月报修数量统计',
                           subtext: '2020年'
                       },
                       tooltip: {
                           trigger: 'axis'
                       },
                       legend: {
                           data: ['最高报修个数']
                       },
                       toolbox: {
                           show: true,
                           feature: {
                               dataZoom: {
                                   yAxisIndex: 'none'
                               },
                               dataView: {readOnly: false},
                               magicType: {type: ['line', 'bar']},
                               restore: {},
                               saveAsImage: {}
                           }
                       },
                       xAxis: {
                           type: 'category',
                           boundaryGap: false,
                           data: ['前二个月', '前一个月', '当月']
                       },
                       yAxis: {
                           type: 'value',
                           axisLabel: {
                               formatter: '{value} 个'
                           }
                       },
                       series: [
                           {
                               name: '报修个数',
                               type: 'line',
                               data: [this.threeMonthCount.twocount, this.threeMonthCount.onecount, this.threeMonthCount.thiscount],
                               markPoint: {
                                   data: [
                                       {type: 'max', name: '最大值'},
                                       {type: 'min', name: '最小值'}
                                   ]
                               },
                               markLine: {
                                   data: [
                                       {type: 'average', name: '平均值'}
                                   ]
                               }

                           }
                       ]
                   });
               },1000)
            }
        }
    };
</script>

<style>

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
